<template>
  <el-drawer
    v-model="props.visible"
    title="发起审批"
    direction="rtl"
    size="40%"
  >
    <el-card
      shadow="never"
      v-for="workflowGroup in allWorkflowsGroups"
      :key="workflowGroup.workflowType"
      style="width: 100%; margin-bottom: 10px"
    >
      <template #header>
        <h2>{{ workflowGroup.workflowType }}</h2>
      </template>
      <el-row>
        <el-col
          :span="12"
          v-for="workflow in workflowGroup.items"
          :key="workflow.id"
          @click="createTask(workflow)"
        >
          <el-card
            class="el-card-version-item"
            :shadow="selectedWorkflowId === workflow.id ? 'always' : 'hover'"
          >
            <h4>
              <el-text class="mx-1" size="large">{{ workflow.name }}</el-text>
            </h4>
            <p>
              <el-text class="mx-1" type="info">{{ workflow.description }}</el-text>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <CreateTaskDrawer
      v-model="createDialog.visible"
      :workflow-id="createDialog.workflowId"
      :workflow-name="createDialog.workflowName"
      :workflow-version="createDialog.workflowVersion"
      @closed="onClose"
    />
  </el-drawer>
</template>

<script setup>
import { defineProps, watch, ref, nextTick, onMounted } from "vue";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import CreateTaskDrawer from "./CreateTaskDrawer.vue";

const props = defineProps({
  visible: {
    default: true,
  },
});
const emit = defineEmits(["update:visible", "closed"]);
const loading = ref(false);
const allWorkflowsGroups = ref([]);
const createDialog = ref({
  visible: false,
  workflowId: "",
  workflowName: "",
  workflowVersion: 0,
});

const selectedWorkflowId = ref("");
watch(
  () => props.visible,
  () => {
    if (!props.visible) {
      getAllWorkflowsWithVersion();
    }
  }
);

const workflowDesignStore = useWorkflowDesignStore();
const getAllWorkflowsWithVersion = () => {
  loading.value = true;
  workflowDesignStore.getAllWorkflowsWithDefaultVersionGroup({}).then((res) => {
    allWorkflowsGroups.value = res;
    loading.value = false;
  });
};

const createTask = (workflowItem) => {
  createDialog.value.workflowId = workflowItem.id;
  createDialog.value.workflowName = workflowItem.name;
  createDialog.value.visible = true;
  createDialog.value.workflowVersion = workflowItem.activeVersion;
  selectedWorkflowId.value = workflowItem.id;
};
const onClose = () => {
  createDialog.value.workflowId = "";
  createDialog.value.visible = false;
  emit("closed");
  emit("update:visible", false);
};
onMounted(() => {
  getAllWorkflowsWithVersion();
});
</script>

<style lang="less" scoped>
.el-col {
  padding: 5px;
}
.el-col .el-card {
  cursor: pointer;
}
:deep(.is-always-shadow) {
  background: rgb(221.7, 222.6, 224.4);
  color: #ffffff;
}
:deep(.el-card-version-item) {
  text-align: left;
  
  .el-card__body{
    padding: 10px;
  }
}
</style>
